<script setup>
import {ref,unref} from 'vue'
import { useNavBarStyle } from '../../utils/system';
import {routerTo} from '../../utils/common.js'
const {navBarHeight}=useNavBarStyle()

//搜索文本
const searchVal=ref('')

const menuList=ref([
	{
		label:"我的积分",
		icon:"icon-jifen",
		color:"#6470E8",
		bg1:"#CBD6FC",
		bg2:"#EDEFFD"
	},
	{
		label:"购物商城",
		icon:"icon-caigou",
		color:"#EF807A",
		bg1:"#FADAD2",
		bg2:"#FFF6F5"
	},
	{
		label:"商家地图",
		icon:"icon-dianpu1",
		color:"#79AA9C",
		bg1:"#D3F2EE",
		bg2:"#EDF7F7"
	},
	{
		label:"我要合作",
		icon:"icon-hezuoguanxi",
		color:"#45C2D3",
		bg1:"#A4F2FD",
		bg2:"#ECFBFD"
	}
])

//搜索事件
const onSearch=()=>{
	routerTo("/pages/shop/search?keyword="+unref(searchVal))
}

//查看商品详情
const handleDetails=()=>{
	routerTo("/pages/shop/details")
}


</script>


<template>
  <view class="page-wrap">
  <!--导航栏-->
  <tar-bar title="首页" titleColor="green"></tar-bar>
  <!--搜素栏-->
  <search @on-confirm="onSearch" v-model:keyword="searchVal"></search>
  <!--内容区域-->
  <view class="page-content">
	  <!--轮播图-->
	  <view class="banner">
		  <swiper class="swiper" autoplay circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)">
			  <swiper-item class="swiper-item"><image class="image" src="/static/banner/tmp_banner1.png"></image></swiper-item>
			  <swiper-item class="swiper-item"><image class="image" src="/static/banner/tmp_banner2.jpg"></image></swiper-item>
		  </swiper>
	  </view>
	  <!--公告区域-->
	  <view class="notice">
		  <scroll-notice></scroll-notice>
	  </view>
	  
	  <!--菜单栏-->
	  <view class="home-menu">
		  <view :style="{color:item.color}" class="item" v-for="item in menuList" :key="item.icon">
			  <view :style="{background:`linear-gradient(to bottom,${item.bg1},${item.bg2});`}" class="icon" >
				  <text class="iconfont" :class="item.icon"></text>
			  </view>
			  <view class="label">{{item.label}}</view>
		  </view>
	  </view>
	  <!--抽奖区域-->
	  <view class="prize">
		  <image class="image" src="/static/home_xydcj.png" mode="aspectFill"></image>
	  </view>
	  <!--热门推荐-->
	  <view class="hot">
		<view class="page-title">
			<view class="left">
				<view class="line"></view>
				<view class="name">热销产品</view>
			</view>
			<view class="right">
				<view class="more">查看更多</view>
				<view class="icon">
					<uni-icons type="right" size="24rpx" color="#6A6A6A"></uni-icons>
				</view>
			</view>
		</view>
		<view class="hot-content">
			<view class="list">
				<view class="item" v-for="item in 6" :key="item" @tap="handleDetails">
					<card-goods></card-goods>
				</view>
			</view>
		</view>
	  </view>
  </view>
  
  </view>
</template>


<style lang="scss" scoped>
.page-wrap{
    .page-content{
		padding: 20rpx 32rpx;
		width: 100%;
		position: relative;
		overflow: hidden;
		&::before{
			content: "";
			display: block;
			width: 984rpx;
			height: 522rpx;
			border-radius: 50%;
			background:  $uni-color-primary;
			position: absolute;
			left: calc(50% - 492rpx);
			top:-320rpx;
		}
		.banner{
			width: 100%;
			.swiper{
				width: 100%;
				height: 352rpx;
				&-item{
					height: 100%;
					width: 100%;
					border-radius: 30rpx;
					overflow: hidden;
					.image{
						height: 100%;
						width: 100%;
					}
				}
			}
		}
		.notice{
			padding:40rpx 0;
		}
		.home-menu{
			padding: 25rpx 0;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				.icon{
					width: 140rpx;
					height: 140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					.iconfont{
						font-size: 60rpx;
					}
				}
				.label{
					font-size: 32rpx;
					text-align: center;
					padding-top: 15rpx;
				}
			}
		}
		.prize{
			padding: 20rpx 0;
			text-align: center;
			.image{
				width: 289px;
				height: 70px;
			}
		}
	}
	.page-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			gap: 10rpx;
			.line{
				width: 6rpx;
				height: 32rpx;
				background-color: $uni-color-primary;
				border-radius: 6rpx;
			}
			.name{
				font-size: 36rpx;
				font-weight: bolder;
				color:$uni-color-primary;
			}
		}
		.right{
			display: flex;
			align-items: center;
			gap: 5rpx;
			.more{
				font-size: 24rpx;
				color: #a6a6a6;
			}
			.icon{
				display: flex;
				align-items: center;
			}
		}
	}
	.hot{
		padding: 30rpx 0;
		&-content{
			margin-top: 30rpx;
			.list{
				display:grid;
				grid-template-columns: repeat(2,1fr);
				gap:30rpx;
			
			}
		}
	}
}


</style>
